<template>
  <div class="container-region">
   <div class="region-right">
    <p>停车场今日区域消费图</p>
    <div class="region"></div>   
   </div>
  </div>
</template>

<script>
import * as  echarts from 'echarts'
export default {
  mounted() {
    this.initEcharts()
  },
  methods: {
    //柱状图
   initEcharts(){
     var myChart = echarts.init(document.getElementsByClassName('region')[0])
     let dataAxis = ['芙蓉区', '开福区', '关心区', '雨花区', '岳麋区', '其他区域'];
     // prettier-ignore
     let data = [11110, 10002, 9191, 8234, 7290, 380];
     myChart.setOption({
      //画布大小
      grid:{
          top:"15%",
          left:"3%",
          right:"18%",
          bottom:"5%",
          containLabel:true,
},
  xAxis: {
    splitLine:{
    show:true,
    lineStyle:{
      type:'dashed',
      color:'#CBCBCB',
    }
  },
    data: dataAxis,
    axisLabel: {
      inside: false,
      color: '#333333',
      // rotate:30,//字体倾斜角度
      interval: 0//强制隐藏字体显示
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  
  yAxis: {
    splitLine:{
    show:true,
    lineStyle:{
      type:'dashed',
      color:'#CBCBCB'
    }
  },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#999'
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
   itemStyle: {   //设置在柱状图上显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            },
  series: [
    {
      label:{
        show:true,
        position:'top',
      },
      type: 'bar',
      showBackground: false,
      barWidth:20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 1, color: '#FBFEFE' },
          { offset: 0.5, color: '#9FC8DD' },
          { offset: 0, color: '#3D66D5' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: '#3D66D5' },
            { offset: 0.7, color: '#9FC8DD' },
            { offset: 0, color: '#FBFEFE' }
          ])
        }
      },
      data: data
    }
  ]
})
   }
  },



}
</script>

<style lang="less" scoped>
div,p,span,li{
    box-sizing: border-box;
}
.container-region{
  display: flex;
  justify-content: space-between;
  p{
      font-weight: bold;
      font-size: 18px;
    }
 
  .region-right{
    width: 402px;
    height: 280px;
     background: rgba(255,255,255,0.6);
    border-radius: 5px;
    padding: 16px 15px;
    .region{
      width: 435px;
      height: 240px;
    }

  }

}

</style>